<template>
  <div class="head">
    <div class="bc-circle">
      <div class="circle part1"></div>
      <div class="circle part2"></div>
      <div class="circle part3"></div>
      <div class="circle part4"></div>
    </div>
    <div class="person-msg">昵称: {{nickname}}</div>
    <div class="center-part">
      <div class="flow-msg">可用流量</div>
      <div class="own-flow"><span>{{ useFlows}}</span>G</div>
    </div>
  </div>
</template>

<script>
import { FLOWINFO } from '../../api/request'
import {Toast} from 'vue-ydui/dist/lib.rem/dialog'
export default {
  name: 'head',
  data () {
    return {
      nickname: '',
      useFlows: 0
    }
  },
  mounted () {
    this.nickname = this.$store.getters.name
    FLOWINFO(this.$store.getters.uid).then(res => {
      if (res.data.code === 200) {
        this.useFlows = res.data.residualflow
      } else {
        Toast({mes: res.data.msg, timeout: 1000})
      }
    })
  }
}
</script>

<style scoped>
  .head{
    position: relative;
    background-color: #0092f8;
    overflow: hidden;
    height: 4.7rem;
    width: 100%;
    font-size: 0;
    padding-left: 0.4rem;
    padding-top: 0.4rem;
    color: #fff;
  }
  .bc-circle{
    position: absolute;
    top: 0;
    left: 0;
    width: 7.5rem;
    height: 4.7rem;
  }
  .circle{
    position: absolute;
    background-color: #16b0f7;
    border-radius: 50%;
  }
  .part1{
    width: 2.64rem;
    height: 2.64rem;
    left: 3.16rem;
    top: -1.32rem;
  }
  .part2{
    width: 1.14rem;
    height: 1.14rem;
    right: 1.2rem;
    top: 1.7rem;
  }
  .part3{
    width: 0.5rem;
    height: 0.5rem;
    left: 0.7rem;
    top: 2.6rem;
  }
  .part4{
    width: 1.14rem;
    height: 1.14rem;
    left: -0.4rem;
    bottom: -0.2rem;
  }
  .person-msg{
    font-size: 0.3rem;
    color: #ffffff;
  }
  .center-part{
    width: 2.74rem;
    height: 2.74rem;
    border-radius: 50%;
    border: 0.06rem solid #00ff00;
    position:absolute;
    top: 1.5rem;
    text-align: center;
    left: calc(50% - 1.37rem);
    padding-top: 0.6rem;
  }
  .flow-msg{
    font-size: 0.24rem;
  }
  .own-flow{
    font-size: .42rem;
    width: 70%;
    margin: 0 auto;
  }
  .own-flow span{
    font-size: 0.72rem;
    line-height: 1.2rem;
  }
</style>
